'use client';

// React Wizard
import { useWizard } from 'react-use-wizard';

// Components
import { BaseButton } from '@/app/components/reusable/BaseButton';

// Contexts
import { useTranslationContext } from '@/context/TranslationContext';

// Icons
import { ArrowLeft, ArrowRight } from 'lucide-react';

const WizardNavigation = () => {
    const { isFirstStep, isLastStep, handleStep, previousStep, nextStep } = useWizard();

    const { _t } = useTranslationContext();

    return (
        <div className="flex justify-end gap-5">
            {!isFirstStep && (
                <BaseButton tooltipLabel="Go back to the previous step" onClick={previousStep}>
                    <ArrowLeft />
                    {_t('form.wizard.back')}
                </BaseButton>
            )}
            <BaseButton tooltipLabel="Go to the next step" disabled={isLastStep} onClick={nextStep}>
                {_t('form.wizard.next')}
                <ArrowRight />
            </BaseButton>
        </div>
    );
};

export default WizardNavigation;
